<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 50px 150px;
            border: 1px solid #ccc;
            cursor: move;
        }
        .mask {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: .5;
        }
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 450px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="img/b3.png" alt="" class="bpic">
        </div>
    </div>
</body>
<script>
    var box = document.querySelector('.box');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bpic = document.querySelector('.bpic')
    box.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';

    })
    box.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    box.addEventListener('mousemove', function (e) {
        var x = e.pageX - box.offsetLeft;
        var y = e.pageY - box.offsetTop;
        var maskx = x - mask.offsetWidth / 2;
        var masky = y - mask.offsetHeight / 2;
        if (maskx < 0) {
            maskx = 0;
        } else if (maskx > box.offsetWidth - mask.offsetWidth) {
            maskx = box.offsetWidth - mask.offsetWidth;
        }
        if (masky < 0) {
            masky = 0;
        } else if (masky > box.offsetHeight - mask.offsetHeight) {
            masky = box.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = maskx + 'px';
        mask.style.top = masky + 'px';

        var xb = maskx / (box.offsetWidth - mask.offsetWidth) * (bpic.offsetWidth - big.offsetWidth);
        var yb = masky / (box.offsetHeight - mask.offsetHeight) * (bpic.offsetHeight - big.offsetHeight);
        bpic.style.left = - xb + 'px';
        bpic.style.top = - yb + 'px';
    })




</script>
</html>


<!-- 老师的写法 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
    
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;

        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            /* position: relative; */
        }

    </style>
</head>

<body>
    <div class="box" id="box">

        <div class="small">
            <img src="img/small.jpg" width="350" alt="" />
            <div class="mask"></div>
        </div>

        <div class="big">
            <img src="img/big.jpg" width="800" alt="" />
        </div>

    </div>
</body>
<script type="text/javascript">
    // 最大盒子
    var box = document.querySelector("#box");
    // 小盒子
    var smallBox = box.children[0];
    // 大盒子
    var bigBox = box.children[1];
    // 小图片
    var smallImage = smallBox.children[0];
    // 蒙层
    var mask = smallBox.children[1];
    // 大图片
    var bigImage = bigBox.children[0];

    // 1.滑动显示蒙层大盒子
    smallBox.addEventListener("mouseover", function () {
        mask.style.display = "block";
        bigBox.style.display = "block";
    })
    // 1.滑动隐藏蒙层大盒子
    smallBox.addEventListener("mouseout", function () {
        mask.style.display = "none";
        bigBox.style.display = "none";
    })
    // 2.滑动鼠标的位置赋值给蒙层
    smallBox.addEventListener("mousemove", function (e) {

        var maskX = e.pageX - box.offsetLeft;
        var maskY = e.pageY - box.offsetTop;

        maskX = maskX - mask.offsetWidth / 2;
        maskY = maskY - mask.offsetHeight / 2;

        // // 限制
        maskX = maskX < 0 ? 0 : maskX;
        maskY = maskY < 0 ? 0 : maskY;

        // // 限制
        maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX;
        maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY;


        mask.style.left = maskX + "px";
        mask.style.top = maskY + "px";

        var bili = bigImage.offsetWidth / smallImage.offsetWidth;

        bigImage.style.left = -bili * maskX + "px";
    })


</script>

</html> -->
